<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>淘宝网首页</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            background-color: #eae8eb;
        }
        .body .right {
            width: 100px;
            float: left;
            background-color: white;
        }
        .body .right .head {
            background-color: white;
            /* background-color: pink; */
            margin-top: 20px;
        }
        .body .right .head ul li {
            background-color: white;
            /* background-color: pink; */
            margin: 0 30px 0 0;
            font-size: 16px;
        }
        /* ==========font color */
        .tianMao {
            color: #ff0036;
        }
        .juHuaSuan {
            color: #ff0091;
        }
        .tianMaoChaoShi {
            color: #33c984;
        }
        .other {
            color: #333333;
        }
        .shu img {
            background-color: white;
        }
        /* font color========== */
        select{ 
            border: 0;
            display: block;
            position: relative;
            background-color:#f5f5f5; 
        }
        .ha a{
            text-decoration:none;
        }
        .ha a:link{
            color: #ff5000;
        }
        .ha a:hover{
            color: #ff5000;
        }
        .ha a:visited{
            color: #ff5000;
        }
        .ha a:active{
            color: #ff5000;
        }
        .hh a{
            color:#6c6c6c;
            text-decoration:none;
        }
        .hh a:link{
            color:#6c6c6c;
        }
        .hh a:hover{
            color: #ff5000;
        }
        .hh a:active{
            color: #ff5000;
        }
        .hh a:visited{
            color:#6c6c6c;
        }
        li {
            list-style: none;
            float: left;
        }
        a {
            text-decoration: none;
        }
        #hat{
            width: 100%;
            height: 35px;
            background-color:#f5f5f5;
        }
        #brain{
            float: left;
            width: 100%;
            height: 150px;
            margin-top: 30px;
        }
        #bzy{
            margin-left: 70px;
        }
        .sousuo {
            margin-top: 50px;
        }
       
        /* 全局 */
        .nav {
            width: 1380px;
            margin: auto;
            overflow: hidden;
        }
        .ss {
            float: left;
            width: 300px;
            height: 40px;
            margin: 25px 150px 0 0;
            background-color: white;
        }
        .log img {
            width: 150px;
            float: left;
            margin-right: 180px;
        }
        .ss input {
            position: relative;
            top: 1px;
            height: 49px;
            width: 574px;
            border:1px solid #ff5000;
            border-left: none;
            border-right: none;
            outline: none;
        }
        .ss .btn {
            /* display: inline-block; */
            width: 80px;
            height: 35px;
            position: absolute;
            overflow: hidden;
            border-radius: 20px;
            margin-top: 7px;
            border: none;
            background-image: linear-gradient(to right,#ff9000 0,#ff5000 100%);
            color: white;
            font-size: 18px;
        }
        .ss .right {
            float: right;
            position: relative;
            top: 2.9px;
            width: 90px;
            height: 48.9px;
            border:1px solid #ff5000;
            border-radius: 10px;
            border-left: none;
            border-top-right-radius: 30px;
            border-bottom-right-radius: 30px;
        }
        .ewm {
            float: left;
        }
        .body {
            background-color: white;
            border-top-left-radius: 25px;
            border-top-right-radius: 25px;
            border-bottom-left-radius: 25px;
            border-bottom-right-radius: 25px;
            margin-top: 200px;
            margin-right: 20px;
            overflow: hidden;
        }
        /* ==========左半部分 */
        .body .left {
            float: left;
            overflow: hidden;
            background-color: white;
            margin-top: 20px;
        }
        .body .left .head {
            float: left;
            background-color: white;
            /* background-color: pink; */
            width: 95px;
            padding: 0 80px;
        }
        .leftHeadfont {
            font-size: 20px;
            background-color: white;
            /* background-color: pink; */
            color: #ff4e24;
        }
        .menuitem {
            width: 255px;
            text-align: center;
            color: #666666;
        }
        .menuitem ul li{
            width: 255px;
            background-color: white;
            padding: 10px 0;
        }
        .body .right {
            width: 100px;
            float: left;
            background-color: white;
        }
        .body .right .head {
            width: 1200px;
            background-color: white;
            margin-top: 20px;
        }
        .body .right .head ul li {
            float: left;
            background-color: white;
            margin: 0 30px 0 0;
            font-size: 16px;
        }
        .tianMao {
            color: #ff0036;
        }
        .juHuaSuan {
            color: #ff0091;
        }
        .tianMaoChaoShi {
            color: #33c984;
        }
        .other {
            color: #333333;
        }
        .shu img {
            background-color: white;
        }
        .main {
            width: 1300px;
        }
        .top {
            position: relative;
            width: 520px;
            height: 300px;
            background-color: white;
        }
        .top ul li{
            background-color: white;
        }
        .arrow-l {
            display: none;
            position: absolute;
            top: 45%;
            width: 24px;
            height: 40px;
            background: rgba(0, 0, 0, 0.5);
            text-align: center;
            line-height: 40px;
            color: white;
            font-size: 18px;
            border-top-right-radius: 30px;
            border-bottom-right-radius: 30px;
            z-index: 1;
        }
        .arrow-r {
            display: none;
            position: absolute;
            top: 45%;
            left: 496px;
            width: 24px;
            height: 40px;
            background: rgba(0, 0, 0, 0.5);
            text-align: center;
            line-height: 40px;
            color: white;
            font-size: 18px;
            border-top-left-radius: 20px;
            border-bottom-left-radius: 20px;
            z-index: 1;
        }
        .top ul {
            position: absolute;
            top: 0px;
            left: 0px;
            width: 700%;
        }
        .top ul li {
            float: left;
        }
        .main .left .bottom {
            background-color: white;
            margin-top: 20px;
        }
        .main .right {
            float: left;
            margin-top: 20px;
            margin-left: 30px;
        }
        .main .btm {
            margin-top: 16px;
        }
    </style>
</head>
<body>
    <div id="hat"style="float:left;font-size:10px">
            <div id="hzuo" style="float: left;margin-left: 20px;margin-top: 7px;">
            <div id="hdz"style="float:left;">
                <select>
                    <option>中国大陆</option>
                    <option>全球</option>
                    <option>中国香港</option>
                    <option>中国台湾</option>
                    <option>中国澳门</option>
                </select>
            </div>
            <div id="hdl"style="float:left;margin-left: 20px;" class="ha" ><a href="https://login.taobao.com/member/login.jhtml?spm=a21bo.21814703.754894437.1.5af911d92DjESH&f=top&redirectURL=https%3A%2F%2Fwww.taobao.com%2F">亲，请登录</a></div>
            <div id="hzc"style="float:left;margin-left: 10px;" class="hh"><a href="https://reg.taobao.com/member/reg/fast/union_reg?_regfrom=TB">免费注册</a></div>
            <div id="hsj"style="float:left;margin-left: 20px;" class="hh"><a href="https://mpage.taobao.com/hd/download.html">手机逛淘宝</a></div>
            </div>

            <div id="hyou"style="float:right; margin-right:120px;margin-top: 7px;"">
            <div id="hwd"style="float:left;;" >
                <select style="width: 90px;">
                    <option>我的淘宝</option>
                    <option>已买到的宝贝</option>
                    <option>我的足迹</option>
                    <option>爱逛街</option>
                    <option>淘宝达人</option>
                    <option>新欢</option>
                </select>
            </div>
            <div id="hgw"style="float:left;">购物车</div>
            <div id="hsc"style="float:left;">
                <select name="" id="" style="width: 80px;margin-right: 10px;">
                    <option>收藏夹</option>
                    <option>收藏起来的宝贝</option>
                    <option>收藏起来的店铺</option>
                </select>
            </div>
            <div id="hsp" class="hh"style="float:left;"><a href="https://huodong.taobao.com/wow/tbhome/act/market-list?spm=a21bo.21814703.1997563209.1.5af911d9E1I02u">商品分类</a></div>
            <div id="hmf"style="float:left;">免费开店</div>
            <div id="hqn"style="float:left;">
                <select>
                    <option>千牛卖家中心</option>
                    <option>免费开店</option>
                    <option>已卖出的宝贝</option>
                    <option>出售中的宝贝</option>
                    <option>卖家服务市场</option>
                    <option>卖家培训中心</option>
                    <option>体检中心</option>
                    <option>问商友</option>
                    
                </select>
            </div>
            <div id="hkf"style="float:left;">
                <select>
                    <option>联系客服</option>
                    <option>消费者客服</option>
                    <option>商家服务大厅</option>
                </select>
            </div>
            <div id="hwz"style="float:left;">
                <select>
                    <option>网站导航</option>
                </select>
            </div>
        </div>
        </div>
    <div class="nav">
        <div class="sousuo">
            <!-- 淘宝log -->
            <div class="log">
                <img src="images/tbt.png" alt="">
            </div>
            <!-- 搜索 -->
            <div class="ss">
                <label for="">宝贝</label><input placeholder="请输入你的手机号码" type="te1" value="" id="sj" style="width: 170px;height: 30px;border: none;outline: none;">
                        
            </div>
            <div class="ewm">
                <img src="images/erweima.png" alt="">
            </div>
        </div>
        <!-- ==========内容========== -->
        <div class="body">
            <!-- ==========左边导航列表========== -->
            <div class="left">
                <div class="head">
                    <span class="leftHeadfont">主题市场</span>
                </div>
                <div class="menuitem">
                    <ul>
                        <li>男装&nbsp;/&nbsp;户外运动&nbsp;/&nbsp;鲜花&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;></li>
                        <li>男装&nbsp;/&nbsp;户外运动&nbsp;/&nbsp;鲜花&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;></li>
                        <li>男装&nbsp;/&nbsp;户外运动&nbsp;/&nbsp;鲜花&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;></li>
                        <li>男装&nbsp;/&nbsp;户外运动&nbsp;/&nbsp;鲜花&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;></li>
                        <li>男装&nbsp;/&nbsp;户外运动&nbsp;/&nbsp;鲜花&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;></li>
                        <li>男装&nbsp;/&nbsp;户外运动&nbsp;/&nbsp;鲜花&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;></li>
                        <li>男装&nbsp;/&nbsp;户外运动&nbsp;/&nbsp;鲜花&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;></li>
                        <li>男装&nbsp;/&nbsp;户外运动&nbsp;/&nbsp;鲜花&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;></li>
                        <li>男装&nbsp;/&nbsp;户外运动&nbsp;/&nbsp;鲜花&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;></li>
                        <li>男装&nbsp;/&nbsp;户外运动&nbsp;/&nbsp;鲜花&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;></li>
                        <li>男装&nbsp;/&nbsp;户外运动&nbsp;/&nbsp;鲜花&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;></li>
                        <li>男装&nbsp;/&nbsp;户外运动&nbsp;/&nbsp;鲜花&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;></li>
                        <li>男装&nbsp;/&nbsp;户外运动&nbsp;/&nbsp;鲜花&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;></li>
                        <li>男装&nbsp;/&nbsp;户外运动&nbsp;/&nbsp;鲜花&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;></li>
                        <li>男装&nbsp;/&nbsp;户外运动&nbsp;/&nbsp;鲜花&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;></li>
                    </ul>
                </div>
            </div>
            <!-- ==========右边 -->
            <div class="right">
                <!-- ==========右边头部 -->
                <div class="head">
                    <ul>
                        <li class="tianMao">天猫</li>
                        <li class="juHuaSuan">聚划算</li>
                        <li class="tianMaoChaoShi">天猫超市</li>
                    </ul>
                    <ul class="shu">
                        <li class="other"><img src="images/fgx.png" alt="">司法拍卖</li>
                        <li class="other">飞猪旅行</li>
                        <li class="other">天天特卖</li>
                        <li class="other">淘小铺<img src="images/fgx.png" alt=""></li>
                    </ul>
                    <ul>
                        <li class="other">造点新货</li>
                        <li class="other">苏宁易购</li>
                        <li class="other">淘宝心选</li>
                        <li class="other">智能生活</li>
                    </ul>
                </div>
                <!-- 右边头部========== -->
                <!-- ==========右边主内容 -->
                <div class="main">
                    <div class="left">
                        <div class="top">
                            <!-- 左侧按钮 -->
                            <a href="javascript:;" class="arrow-l">
                                &lt;
                            </a>
                            <!-- 右侧按钮 -->
                            <a href="javascript:;" class="arrow-r">
                                &gt;
                            </a>
                            <!-- 图片轮播 -->
                            <ul>
                                <li>
                                    <a href="#">
                                        <img src="images/lb1.jpg" alt="图片走丢了">
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <img src="images/lb2.jpg" alt="图片走丢了">
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <img src="images/lb3.jpg" alt="图片走丢了">
                                    </a>
                                </li>
                            </ul>
                            <!-- 小圆点 -->
                            <ol>
                               
                            </ol>
                        </div>
                        <div class="bottom">
                            <img src="images/zx.png" alt="">
                        </div>
                    </div>
                    <div class="right">
                        <div class="tp">
                            <img src="images/dl.png" alt="">
                        </div>
                        <div class="btm">
                            <img src="images/yx.png" alt="">
                        </div>
                    </div>
                </div>
                <!-- 右边主内容========== -->
            </div>
            <!-- 右边========== -->
        </div>
    </div>
    <script>
        window.addEventListener('load',function() {
           
            var arrow_l = document.querySelector('.arrow-l');
            var arrow_r = document.querySelector('.arrow-r');
            var top = document.querySelector('.top');
            var topWidth = top.offsetWidth;
            // 显示隐藏左右箭头
            top.addEventListener('mouseenter',function(){
                arrow_l.style.display = 'block';
                arrow_r.style.display = 'block';
            })
            top.addEventListener('mouseleave',function(){
                arrow_l.style.display = 'none';
                arrow_r.style.display = 'none';
            })

            // 点击隐藏二维码
            var ewm = document.querySelector('.ewm');
            ewm.onclick = function() {
                this.style.display = 'none';
            }        
        })


    </script>
   
   
   
   
</body>
</html>